<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>克里斯笔记-个人中心</title>
<link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/image/favicon.ico" />
<script src="${pageContext.request.contextPath}/js/jquery-3.5.0.min.js"></script>
<script src="${pageContext.request.contextPath}/js/wangEditor.min.js"></script>
<style type="text/css">
	html, body {
		height: 100%;
		margin: 0px;
	}
	.headDiv a
	{
		/*去掉a标签的下划线*/
		text-decoration:none
	}
	/*头部div样式*/
	.headDiv
	{
		background-color:#ececec;
		position:fixed;
		top:0px;
		left:0px;
		right:0px
	}
	/*头部div的小图标样式*/
	.headDiv img
	{
		width:45px;
		height:45px;
		border-radius:25px;
		margin-top:5px;
		margin-bottom:5px;
		margin-left:1%;
		margin-right:1%
	}
	/*个人中心标题样式*/
	.title
	{
		position:fixed;
		font-size:40px;
		left:45%
	}
	/*编辑器工具栏样式*/
	.w-e-toolbar
	{
		/*修改高度和宽带时，!important是必写的*/
		width:60% !important;
		margin-left:20%
	}
	/*编辑器文本框样式*/
	.w-e-text-container
	{
    	/*修改高度和宽带时，!important是必写的*/
    	width:60% !important;
    	height:650px !important;
    	margin-left:20%
	}
	/*添加笔记界面的按钮的样式*/
	input[type="button"]
	{
		width:200px;
		height:50px;
		font-size:25px;
		border-radius:25px;
		margin-left:100px;
		margin-right:100px;
		outline:none
	}
	/*左侧导航栏样式*/
	.leftDiv
	{
		position:fixed;
		width:16%;
		height: calc(100% - 100px);
		top: 75px;
		left:0px;
		background-color:#FAEBD7
	}
	/*左侧导航栏里面的a标签的样式*/
	.leftDiv a
	{
		font-size:25px
	}
	/*主要div下面的两个div的样式，我的笔记div，个人信息div*/
	.myRecordsDiv,.personalInfoDiv
	{
		position:fixed;
		width:83%;
		height: calc(100% - 100px);
		top: 75px;
		right:5px;
		border:black 1px solid
	}
	/*笔记div的样式*/
	.recordDiv
	{
		width:70%;
		height:150px;
		margin:10px;
		padding:10px;
		border:pink 2px solid;
		text-align:left
	}
	/*笔记div下笔记标题div的样式*/
	.recordTitleDiv 
	{
		width:100%;
		height:25px;
		background:#ececec
	}
	/*笔记div下笔记内容div的样式*/
	.recordContentDiv
	{
		width:100%;
		height:110px;
		overflow:hidden
	}
	/*笔记div下笔记内容div下图片的样式*/
	.recordContentDiv img
	{
		/*不显示图片*/
		display:none
	}
	/*显示笔记条数的h2的样式*/
	.myRecordsDiv h2
	{
		display:inline-block;
		margin-left:35%;
		margin-right:10%
	}
</style>
<script>
	//富文本编辑器
	var E=window.wangEditor;
	var editor=new E("#editor");
	//获得其他页面跳转过来时携带的信息
	var msg="${param.msg}";
	//自执行函数
	$(function()
	{
		//修改地址栏里的地址
		history.pushState(null,null,"${pageContext.request.contextPath}/personalCenter");
		//根据其他页面跳转过来时携带的信息做出相应的提示和操作
		if(msg=="recordInfoError") alert("笔记信息错误！");
		else if(msg=="recordAddFailed") alert("添加笔记失败！");
		else if(msg=="recordAddSuccess1") alert("添加笔记成功！");
		else if(msg=="recordAddSuccess2") alert("添加笔记成功，审核通过后将公开至社区！");
		else if(msg=="newNameInfoError") alert("修改昵称信息错误！");
		else if(msg=="newNameFailed") alert("修改昵称失败！");
		else if(msg=="newNameSuccess") alert("修改昵称成功！");
		//富文本图片上传至服务器
		editor.customConfig.uploadImgServer="uploadRecordImage";
		//富文本图片上传的参数名，必要参数，不设置的话后台无法获取到上传的图片
		editor.customConfig.uploadFileName="files";
		//创建富文本编辑器
		editor.create();
		//添加笔记的div默认不显示
		$(".addRecordDiv").each(function()
		{
			$(this)[0].style.display="none";
		});
		//默认显示我的笔记div
		$(".myRecordsA")[0].style="font-size:35px;text-decoration:none;color:black";
		//默认不显示个人信息div
		$(".personalInfoDiv")[0].style.display="none";
		//默认不显示正序笔记div
		$(".ascDiv")[0].style.display="none";
		//判断携带的信息是否包含Name，若包含，则切换个人信息div显示
		if(msg.search("Name")!=-1) changeDiv("personalInfo");
	});
	//切换显示的div，我的笔记div或者个人信息div
	function changeDiv(value)
	{
		//让左侧导航栏的a标签恢复默认样式
		$(".myRecordsA")[0].style="font-size:25px";
		$(".personalInfoA")[0].style="font-size:25px";
		//特殊显示被选中的a标签
		$("."+value+"A")[0].style="font-size:35px;text-decoration:none;color:black";
		//显示相应的div，先让两个div不显示，再让选中的div显示
		$(".myRecordsDiv")[0].style.display="none";
		$(".personalInfoDiv")[0].style.display="none";
		$("."+value+"Div")[0].style.display="";
		return false;
	}
	//打开添加笔记的div
	function openAddRecordDiv()
	{
		//设置添加笔记的div显示
		$(".addRecordDiv").each(function()
		{
			$(this)[0].style.display="";
		});
		//设置左侧导航栏和主要div不显示
		$(".leftDiv")[0].style.display="none";
		$(".mainDiv")[0].style.display="none";
		//右上角添加笔记图标隐藏，右上角返回图标显示
		$(".addRecordIcon")[0].style.display="none";
		$(".goBackIcon")[0].style.display="inline";
		//笔记标题输入框自动获得焦点
		$("[name='recordTitle']").focus();
		return false;
	}
	//关闭添加笔记的div
	function closeAddRecordDiv()
	{
		//设置添加笔记的div隐藏
		$(".addRecordDiv").each(function()
		{
			$(this)[0].style.display="none";
		});
		//设置左侧导航栏显示和主要div显示
		$(".leftDiv")[0].style.display="";
		$(".mainDiv")[0].style.display="";
		//右上角添加笔记图标显示，右上角返回图标隐藏
		$(".addRecordIcon")[0].style.display="inline";
		$(".goBackIcon")[0].style.display="none";
		return false;
	}
	//提交添加笔记
	function addRecord()
	{
		//获取笔记的标题
		var recordTitle=$("[name='recordTitle']").val();
		//获取笔记的内容
		var recordContent=editor.txt.html();
		//判断笔记标题是否为空
		if(recordTitle=="")
		{
			alert("请输入笔记标题！");
			return;
		}
		//判断标题长度是否超过25个字符
		if(recordTitle.length>25)
		{
			alert("笔记标题长度不能超过25个字符！");
			return;
		}
		//将笔记内容放入表单
		$("[name='recordContent']").val(recordContent);
		//提交添加笔记
		$(".addRecordForm").submit();
	}
	//切换显示笔记排序的div
	function changeSortDiv()
	{
		//获取选中的值
		var value=$(".selectState").val();
		console.log(value);
		//跟换显示的div
		$(".ascDiv")[0].style.display="none";
		$(".descDiv")[0].style.display="none";
		$("."+value)[0].style.display="";
	}
	//清空编辑器
	function clearEditor()
	{
		editor.txt.clear();
	}
	//退出登录
	function logout()
	{
		if(confirm("你确定要退出吗？")) return true;
		return false;
	}
	//修改用户昵称
	function changeUserName()
	{
		//获取用户输入的新昵称
		var value=prompt("请输入新昵称：");
		//若用户取消输入或者输入的昵称为空，则不执行修改操作
		if(value=="" || value==null) return false;
		//判断昵称的长度是否符合规范
		if(Object.keys(value).length>10)
		{
			alert("昵称长度不能超过10个字符！");
			return false;
		}
		//判断昵称是否符合规范的正则表达式，不能包含符号
		var regex=/^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
		if(!regex.test(value))
		{
			alert("昵称不能包含符号！");
			return false;
		}
		//判断新昵称是否和旧昵称一样
		if("${sessionScope.user.userName}"==value)
		{
			alert("新昵称不能和旧昵称一样");
			return false;
		}
		//执行修改昵称操作
		location.href="${pageContext.request.contextPath}/changeUserName?newUserName="+value;
		return false;
	}
</script>
</head>
<body>
	<!-- 头部div -->
	<div class="headDiv">
		<!-- 首页小图标 -->
		<a href="${pageContext.request.contextPath}/index" title="首页">
			<img src="${pageContext.request.contextPath}/image/home.jpg"/>
		</a>
		<span class="title">个人中心</span>
		<!-- 添加笔记小图标 -->
		<a href="" title="添加笔记" class="addRecordIcon" onclick="return openAddRecordDiv()">
			<img src="${pageContext.request.contextPath}/image/addRecord.jpg" align="right"/>
		</a>
		<!-- 返回小图标 -->
		<a href="" title="返回" class="goBackIcon" onclick="return closeAddRecordDiv()" style="display:none">
			<img src="${pageContext.request.contextPath}/image/goBack.jpg" align="right"/>
		</a>
	</div>
	<br/><br/><br/>
	<!-- 主要div -->
	<div class="mainDiv">
		<!-- 我的笔记div -->
		<div class="myRecordsDiv">
			<!-- 若用户添加过笔记，则显示共多少条笔记 -->
			<c:if test="${recordsNum!=0}">
				<h2 style="font-size:25px">共${recordsNum}条笔记</h2>
			</c:if>
			<!-- 若用户没有添加过笔记，则显示还没有添加任何笔记 -->
			<c:if test="${recordsNum==0}">
				<h2 style="font-size:25px">还没有添加任何笔记</h2>
			</c:if>
			<!-- 排序方式下拉列表 -->
			<span>排序方式：</span>
			<select class="selectState" onchange="changeSortDiv();">
				<option value="descDiv">倒序</option>
				<option value="ascDiv">正序</option>
			</select>
			<!-- 我的所有笔记的div，默认倒序 -->
			<div align="center" class="descDiv" style="height:calc(100% - 100px);overflow:auto">
				<c:forEach var="record" items="${recordsDesc}">
					<!-- 每个笔记的单独div -->
					<div class="recordDiv">
						<!-- 每个笔记的标题div -->
						<div class="recordTitleDiv">
							<a href="${pageContext.request.contextPath}/record/${record.recordId}" target="_blank">${record.recordTitle}</a>
						</div>
						<!-- 每个笔记的内容div -->
						<div class="recordContentDiv">
							${record.recordContent}
						</div>
						<span style="color:green">最后修改时间：${record.recordTime}</span>
					</div>
				</c:forEach>
			</div>
			<!-- 我的所有笔记的div，正序 -->
			<div align="center" class="ascDiv" style="height:calc(100% - 100px);overflow:auto">
				<c:forEach var="record" items="${records}">
					<!-- 每个笔记的单独div -->
					<div class="recordDiv">
						<!-- 每个笔记的标题div -->
						<div class="recordTitleDiv">
							<a href="${pageContext.request.contextPath}/record/${record.recordId}" target="_blank">${record.recordTitle}</a>
						</div>
						<!-- 每个笔记的内容div -->
						<div class="recordContentDiv">
							${record.recordContent}
						</div>
						<span style="color:green">最后修改时间：${record.recordTime}</span>
					</div>
				</c:forEach>
			</div>
		</div>
		<!-- 个人信息div -->
		<div class="personalInfoDiv">
			<h2 align="center">个人信息</h2>
			<table align="center" style="width:60%;height:150px;margin-top:10%">
				<tr>
					<td style="text-align:right">电子邮箱：</td>
					<td style="text-align:left">${sessionScope.user.userEmail}</td>
					<td><a href="${pageContext.request.contextPath}/goChangeUserEmail">修改</a></td>
				</tr>
				<tr>
					<td style="text-align:right">昵称：</td>
					<td style="text-align:left">${sessionScope.user.userName}</td>
					<td><a href="" onclick="return changeUserName()">修改</a></td>
				</tr>
			</table>
			<p align="center"><a href="${pageContext.request.contextPath}/goChangeUserPwd?msg=change">修改密码</a></p>
		</div>
	</div>
	<!-- 笔记标题 -->
	<div align="center" class="addRecordDiv">
		<form action="${pageContext.request.contextPath}/addRecord" method="post" class="addRecordForm">
			<input type="text" name="recordTitle" placeholder="笔记标题" style="width:52%;height:50px;font-size:25px"/>
			<input type="checkbox" name="isOpen"/>公开至社区
			<input type="text" name="recordContent" style="display:none"/>
		</form>
	</div>
	<br/>
	<!-- 富文本编辑器div -->
	<div id="editor" class="addRecordDiv"></div>
	<br/>
	<!-- 添加笔记的按钮 -->
	<div align="center" class="addRecordDiv">
		<input type="button" value="清空文本框" onclick="clearEditor()"/>
		<input type="button" value="提交" onclick="addRecord()"/>
	</div>
	<!-- 左侧导航栏 -->
	<div class="leftDiv">
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<p align="center"><a href="" class="myRecordsA" onclick="return changeDiv('myRecords')">我的笔记</a></p>
		<br/><br/><br/>
		<p align="center"><a href="" class="personalInfoA" onclick="return changeDiv('personalInfo')">个人信息</a></p>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<p align="center"><a href="${pageContext.request.contextPath}/logout" style="font-size:15px" onclick="return logout()">退出登录</a></p>
	</div>
</body>
</html>